<template>
  <div class="app-table">
    <el-table :data="pageData.items"
      v-loading="loading"
      element-loading-text="拼命加载中"
      stripe
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      :max-height="430"
      :header-cell-style="{backgroundColor:'#409EFF', color: '#fff'}"
      :cell-class-name="tableCellClassName">
      <el-table-column type="selection" width="55" v-if="!pageData.isSelectColmunHide"></el-table-column>
      <el-table-column v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :formatter="item.formatter"
        :filters="item.filters"
        :class-name="item.className"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="操作"
        fixed="right"
        width="200"
        v-if="pageData.isCommonDo">
        <template slot-scope="scope">
          <el-button size="mini"
            type="success"
            @click="checkSingle(scope.$index, pageData.items)">查看</el-button>
          <el-button size="mini"
            type='warning'
            @click="changeSingle(scope.$index, pageData.items)">修改</el-button>
          <el-button size="mini"
            type="danger"
            @click="deleSingle(scope.$index, pageData.items)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作"
          v-if="pageData.isShowoPerationCol">
        <template slot-scope="scope">
          <el-button size="mini"
            @click="checkCriminalSuspect(scope.$index, pageData.items)">查看嫌疑人</el-button>
          <el-button size="mini"
            type="danger"
            @click="checkVictim(scope.$index, pageData.items)">查看受害人</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="pageData.isIntegralHandleInline">
        <template slot-scope="scope">
          <el-button size="mini" :type="pageData.btnType" @click="checkFlowHandleInline(scope.$index, pageData.items)">{{pageData.handleLabel}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="pageData.isCheckTimerShaftHandleInline">
        <template slot-scope="scope">
          <el-button size="mini"
            type="danger"
            @click="checkTimerShaftHandleInline(scope.$index, pageData.items)">{{pageData.checkTimer}}</el-button>
          <el-button size="mini"
            type="danger"
            @click="checkFlowHandleInline(scope.$index, pageData.items)">{{pageData.checkPhotoTitle}}</el-button>
          <el-button size="mini"
            type="danger"
            v-if="pageData.isTheThirdHandleSelect"
            @click="checkCriminalSuspect(scope.$index, pageData.items)">{{pageData.ThirdName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="pageData.isCheckFlowHandleCol">
        <template slot-scope="scope">
          <el-button size="mini"
            type="danger"
            @click="checkFlowHandleInline(scope.$index, pageData.items)">{{pageData.checkPhotoTitle}}</el-button>
          <el-button size="mini"
            type="danger"
            @click="contradiction(scope.$index, pageData.items)">{{pageData.manageTitle}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="!pageData.limit ? 10 : pageData.limit"
      layout="total, prev, pager, next, jumper"
      :total="pageData.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tableColumns: {
      type: Array
    },
    pageData: {
      type: Object,
      default: function () {
        return {
          limit: 10,
          offset: 0,
          items: []
        }
      }
    }
  },
  data () {
    return {
      currentPage: 1,
      tableHeight: undefined,
      name: '',
      loading: false
    }
  },
  mounted () {
    this.name = this.$route.name
    this.loading = true
  },
  methods: {
    tableCellClassName ({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 4 && row.isCriminalTendency === '1') {
        return 'red-row'
      } else if (columnIndex === 5 && row.isImportantEvent === '1') {
        return 'violet-row'
      } else if (columnIndex === 6 && row.isOverdue === '1') {
        return 'yellow-row'
      } else if (columnIndex === 6 && row.evaluationOpinion !== '' && row.evaluationOpinion) {
        return 'green-row'
      } else if (columnIndex === 6 && row.waterSignStatus === 0) {
        return 'warning-row'
      } else if (columnIndex === 6 && row.waterSignStatus === 1) {
        return 'green-row'
      } else if (columnIndex === 6 && row.waterSignStatus === null) {
        return 'danger-row'
      }
      return ''
    },
    timestampToTime: function (row, column) {
      var date = new Date(row.cjsj) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() + ' '
      var h = date.getHours() + ':'
      var m = date.getMinutes() + ':'
      var s = date.getSeconds()
      return Y + M + D + h + m + s
    },
    contradiction (index, data) {
      let checkData = {}
      checkData.data = data
      checkData.index = index
      this.$emit('contradictionManage', checkData)
    },
    checkFlowHandleInline (index, data) {
      let checkData = {}
      checkData.data = data
      checkData.index = index
      this.$emit('checkFlowHandle', checkData)
    },
    checkTimerShaftHandleInline (index, data) {
      let checkData = {}
      checkData.data = data
      checkData.index = index
      this.$emit('checkTimerShaftHandle', checkData)
    },
    checkCriminalSuspect (index, data) {
      let checkData = {}
      checkData.data = data
      checkData.index = index
      this.$emit('checkCriminalSuspect', checkData)
    },
    checkVictim (index, data) {
      let checkData = {}
      checkData.data = data
      checkData.index = index
      this.$emit('checkVictim', checkData)
    },
    handleSelectionChange (rows) {
      this.$emit('handleCheckedRows', rows)
    },
    handleRowClick (rows) {
      this.$emit('handleRowClick', rows)
    },
    handleCurrentChange (val) {
      this.$emit('currentChange', val)
      this.loading = true
    },
    checkSingle (index, data) {
      let checkData = {}
      let arrData = [data[index]]
      checkData.btnType = 'get'
      checkData.dialogTitle = '查看' + this.name
      checkData.rows = arrData
      checkData.url = '/modules'
      checkData.sohwOnly = true
      this.$emit('checkSingleRow', checkData)
    },
    changeSingle (index, data) {
      let checkData = {}
      let arrData = [data[index]]
      checkData.btnType = 'put'
      checkData.dialogTitle = '修改' + this.name
      checkData.rows = arrData
      checkData.url = '/modules'
      checkData.showOnly = false
      checkData.showPart = true
      this.$emit('changeSingleRow', checkData)
    },
    deleSingle (index, data) {
      let checkData = {}
      let arrData = [data[index]]
      checkData.btnType = 'delete'
      checkData.dialogTitle = '删除' + this.name
      checkData.rows = arrData
      checkData.url = '/modules'
      checkData.showOnly = false
      this.$emit('deleSingleRow', checkData)
    }
  },
  computed: {},
  watch: {
    pageData: {
      handler: function (newValue, oldValue) {
        if (newValue.offset === 0) {
          this.currentPage = 1
        }
        this.loading = false
      }
    }
  }
}
</script>
<style scoped>
.el-table {
  margin-bottom: 20px;
}
.app-table >>> .el-table th>.cell {
  white-space: nowrap;
  /* font-weight: 500 */
}
.app-table >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
.app-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(144,147,153,.3);
  border-radius: 3px;
}
.app-table >>> .el-table__fixed-right-patch {
  width: 0px!important;
}
.app-table >>> .el-table td.gutter,.app-table >>> .el-table th.gutter{
 position: relative;
 top: -1px
}
.el-pagination {margin-bottom: 15px}
.el-table >>> .red-row div{
  background:#ff0000;
  color: #fff
}
.el-table >>> .violet-row div{
  background:#ff6666;
  color: #fff
}
.el-table >>> .yellow-row div {
  background:#ff9999;
  color: #fff
}
.el-table >>> .green-row div {
  color: yellowgreen
}

.el-table >>> .warning-row div {
  color: #CFB53B
}
.el-table >>> .danger-row div {
  color: red
}
</style>
